<template>
    <div class="component-container">
        <div class="title-content">角色授权</div>
        <div class="tree-content">
            <el-tree ref="tree" :data="treeData" show-checkbox default-expand-all node-key="id" highlight-current :props="defaultProps" />
        </div>
        <div class="btn-content">
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="onClose">取消</el-button>
        </div>
    </div>
</template>
<script>
import { ref, toRefs, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import http from '@/http.js'
import treeUtil from '@/utils/tree.js'

export default {
    props: {
        roleId: String
    },
    emits: ["close"],
    setup(props, ctx) {
        const state = reactive({
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        })

        const tree = ref(null);

        const loadData = () => {
            http.fetchForm({
                url: '/sys/permission/queryPermissions',
                data: {}
            }).then((res) => {
                state.treeData = treeUtil.generatePermissionTreeData('', res.data);
                loadRolePermission();
            });
        }

        const loadRolePermission = () => {
            http.fetchForm({
                url: '/sys/permission/queryRolePermissions',
                data: {
                    roleId: props.roleId
                }
            }).then((res) => {
                tree.value.setCheckedKeys(res.data);
            });
        }

        const onClose = () => {
            ctx.emit("close");
        }

        const onSubmit = () => {
            let checked = tree.value.getCheckedNodes(false, true);
            if (checked.length == 0) {
                ElNotification({
                    title: '提示',
                    message: "请选择",
                    type: 'info'
                });
                return;
            }

            let menuList = [],
                operationList = [];
            for (let i = 0; i < checked.length; i++) {
                let json = {
                    id: checked[i].id,
                    name: checked[i].label,
                    roleId: props.roleId,
                    category: checked[i].category
                }
                if (checked[i].category == 'menu') {
                    menuList.push(json);
                } else {
                    operationList.push(json);
                }
            }
            let params = {
            	roleId: props.roleId,
                menu: menuList,
                operation: operationList
            }
            http.fetchJson({
                url: '/sys/permission/savePermissions',
                data: params
            }).then((res) => {
                ElNotification({
                    title: '提示',
                    message: "保存成功",
                    type: 'success'
                });
                onClose();
            });
        }

        onMounted(() => {
            loadData();
        });

        return {
            ...toRefs(state),
            tree,
            onSubmit,
            onClose
        }
    }
}
</script>
<style scoped>
.component-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.title-content {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    color: #464c5b;
}

.tree-content {
    position: absolute;
    top: 52px;
    left: 0;
    right: 0;
    bottom: 58px;
    overflow: scroll;
    overflow-x: hidden;
}

.btn-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
}

:deep(.el-tree-node__content) {
    height: 30px;
}

:deep(.el-tree-node__label) {
    font-size: 12px;
}
</style>